<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>rc-dock</title>
  <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.less">
  <style>

    .github-icon {
      padding-left: 16px;
    }

    .github-icon:before {
      width: 16px;
      height: 16px;
      position: absolute;
      left: 4px;
      top: 4px;
      content: url("https://avatars2.githubusercontent.com/u/20446550?s=20");
    }

    .dock-panel.dock-style-custom {
      border: 1px solid #d88;
      border-radius: 8px 8px 0 0;
    }

    .dock-panel.dock-style-custom .dock-tab {
      margin-right: 0;
      border: 1px solid #d88;
      background: #d88;
      color: #fff;
    }

    .dock-panel.dock-style-custom .dock-tab.dock-tab-active {
      background: #fff;
      color: #c33;
    }

    .dock-panel.dock-style-custom .dock-bar {
      background: #facccc;
      border-radius: 7px 7px 0 0;
      border-bottom: 1px solid #d88;
    }

    .dock-panel.dock-style-custom .dock-tab-hit-area {
      /* cover the border area */
      left: -1px;
      right: -1px;
    }

    /* global dock layout styles */
    .dock-layout > .dock-drop-indicator {
      border: solid 1px red;
      box-shadow: inset 0 0 10px red;
      background: none;
    }

    .dock-panel.dock-style-custom .dock-tab-close-btn {
      color: #fff;
    }

    .dock-panel.dock-style-custom .dock-tab-active .dock-tab-close-btn {
      color: red;
    }

    .dock-panel.dock-style-custom .dock-panel-max-btn {
      opacity: 1;
    }

    .dock-panel.dock-style-custom .dock-panel-max-btn:before {
      border-color: #fff;
      color: #fff;
    }
  </style>
</head>
<body>
<div id="app" style="height:100%"></div>

<script src="panel-style.jsx" async></script>
</body>
</html>
